import { Form, Input, InputNumber } from "antd";
import { useEffect, useState } from "react";
import { message } from "antd";
import { Switch } from "antd";
import { portMappingDetail } from "../service";
import dayjs from "dayjs";
import { Select } from "antd";
import { licenseList } from "@/pages/license/service";

const PortMappingFormMgr = ({ record, formRef }) => {
    const { TextArea } = Input;
    const [licenseOptions, setLicenseOptions] = useState([]);

    const loadLicense = async () => {
        licenseList({}).then(ret => {
            setLicenseOptions(ret.items ? () => {
                return ret.items.map((item) => {
                    return {
                        label: item.licenseName,
                        value: item.licenseKey
                    }
                });
            } : []);
        });
    }

    const tryLoadPortMapping = async () => {
        if (record?.id) {
            let portMapping = await portMappingDetail({ id: record.id });
            formRef.current.setFieldsValue(portMapping);
        }
    }

    useEffect(() => {
        loadLicense();
        tryLoadPortMapping();
    }, []);

    return (
        <>
            <Form.Item
                label="映射名称"
                name="portMappingName"
                rules={[
                    {
                        required: true,
                        message: '请输入端口映射名称',
                    }, { type: 'string', max: 32 }
                ]}
            >
                <Input placeholder='请输入端口映射名称' autoComplete="off" />
            </Form.Item>

            <Form.Item
                label="状  态"
                name="enableState"
            >
                <Switch />
            </Form.Item>

            <Form.Item
                label="授权码"
                name="licenseKey"
                rules={[
                    {
                        required: true,
                        message: '请选择授权码',
                    }
                ]}
            >
                <Select
                    showSearch
                    placeholder='请选择授权码'
                    options={licenseOptions}
                />
            </Form.Item>

            <Form.Item
                label="监听端口"
                name="sourcePort"
                rules={[
                    {
                        required: true,
                        message: '请输入监听端口',
                    }
                ]}
            >
                <InputNumber placeholder="监听端口" />
            </Form.Item>
            <Form.Item
                label="目标Ip"
                name="targetIp"
                rules={[
                    {
                        required: true,
                        message: '请输入目标Ip',
                    }, { type: 'string', max: 32 }
                ]}
            >
                <Input placeholder='请输入目标Ip' autoComplete="off" />
            </Form.Item>
            <Form.Item
                label="目标端口"
                name="targetPort"
                rules={[
                    {
                        required: true,
                        message: '请输入目标端口',
                    }
                ]}
            >
                <InputNumber placeholder="目标端口" />
            </Form.Item>

            <Form.Item
                label="白名单"
                name="whiteIps"
            >
                <TextArea
                    showCount
                    maxLength={100}
                    placeholder="请输入Ip白名称,以逗号分隔"
                    style={{ height: 120, resize: 'none' }}
                />
            </Form.Item>

            <Form.Item
                label="黑名单"
                name="blackIps"
            >
                <TextArea
                    showCount
                    maxLength={100}
                    placeholder="请输入Ip黑名单,以逗号分隔"
                    style={{ height: 120, resize: 'none' }}
                />
            </Form.Item>
            <Form.Item
                label="备注"
                name="notes"
            >
                <TextArea
                    showCount
                    maxLength={100}
                    placeholder="请输入备注信息"
                    style={{ height: 120, resize: 'none' }}
                />
            </Form.Item>
        </>
    );

}

export default PortMappingFormMgr;